<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			#div1 input{
				background: white;
			}
			#div1 input.active{
				background: yellow;
			}
			#div1 div{
				padding: 10ox 10px;
				width:223px;
				height:180px;
				background: #ccc;
				display: none;
			}
			#div1 div.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		<input type="button" value="前端开发" class="active" />
		<input type="button" value="Android开发"/>
		<input type="button" value="UI设计"/>
		<div class="active">HTML5\CSS\JavaScript\JS框架</div>
		<div>Java\Android原生\混合</div>
		<div>PS\设计基础</div>
		</div>
		<script>
			function add(){
				console.log("a");
			}
			var a=function(){
				console.log("b");
			};
			
			window.add();//函数如果直接调用，属于window
			add();
			a();
			//获取最外层div元素对象
			var dom=document.getElementById('div1');
			//获取按钮(数组)
			var btns=dom.getElementsByTagName('input');
			//获取div框(对象)
			var divs=dom.getElementsByTagName('div');
			//循环：给3个按钮添加点击事件(函数)
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					//点击某个按钮：改变按钮背景色；下面div框是否显示
					//1、所有按钮背景色白色；当前点击的按钮背景色黄色
					for(var j=0;j<btns.length;j++){
						btns[j].style.background='white';
					}
					this.style.background='yellow';
					//2、当前框显示，其他框隐藏
					for(var k=0;k<divs.length;k++){
						if(this==btns[k]){
							divs[k].style.display='block';
						}else{
							divs[k].style.display='none';
						}
					}
				};
			}
		</script>
	</body>
</html>
